<template>
  <div>
    <div class="outbox">
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="back"
        fixed="true"
      >
        <template #right>
          <van-icon name="chat-o" size="22" />
        </template>
      </van-nav-bar>
      <!-- 图片 -->
      <ul class="bg_img">
        <li v-for="(item, index) in image" :key="index">
          <a href="">
            <img :src="item.images" alt="" />
          </a>
        </li>
      </ul>
      <ul class="good_top" v-if="good_top">
        <li v-for="(item, index) in good_top" :key="index">
          <router-link :to="`/detail/${item.target.param}`">
            <img :src="item.images" alt="" />
          </router-link>
        </li>
      </ul>

      <!-- 爆款特惠 -->
      <div class="discount" v-if="discount">
        <div v-for="(item, index) in discount[0]" :key="index">
          <img :src="item.images" alt="" />
        </div>
        <div class="discount_dls">
          <dl v-for="(item, index) in discount[1]" :key="index">
            <router-link :to="`/detail/${item.target.param}`">
              <dt>
                <a href="">
                  <img :src="item.photo" alt="" />
                </a>
              </dt>
              <dd>
                <div class="title">{{ item.subject }}</div>
                <img
                  src="https://static.epetbar.com/mini_images/emall/special/tips1.png"
                  alt=""
                />
                <span>{{ item.cheap_price }}</span>
                <span>{{ item.sale_price }}</span>
                <div class="price">{{ item.price }}</div>
                <van-icon name="shopping-cart-o" size="22px" />
              </dd>
            </router-link>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderTopic } from "@/api/orderTopic.js";
export default {
  data() {
    return {
      image: null,
      title: null,
      good_top: null,
      discount: [], //爆款特惠 标题
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
  created() {
    getOrderTopic(2052).then((res) => {
      console.log(res);
      this.title = res.data.title;
      this.image = res.data.data[0].body.content;
      this.good_top = res.data.data[1].body.content;
      this.discount = res.data.data[2].body.content;
      this.discount.push(res.data.data[3].body.content);
      console.log(this.discount);
    });
  },
};
</script>

<style src='@/assets/css/outgood.css' ></style>